import React, { Component } from 'react'
// import axios from 'axios'
import PubSub from 'pubsub-js'

export default class Search extends Component {

  search = async () => {
    // 获取用户输入，连续结构赋值+重命名
    const { keyWordElement: { value: keyWord } } = this
    console.log(keyWord)
    // 发送请求前通知App更新状态
    // this.props.updateAppState({ isFirst: false, isLoading: true })
    // 发布消息
    PubSub.publish('updateList', { isFirst: false, isLoading: true })
    // 发送网络请求
    // axios.get(`http://localhost:3000/api1/search/users2?q=${keyWord}`).then(
    //   response => {
    //     // 请求成功后通知App更新状态
    //     // this.props.updateAppState({ isLoading: false, users: response.data.items })
    //     PubSub.publish('updateList', { isLoading: false, users: response.data.items })
    //   },
    //   error => {
    //     // 请求失败后通知App更新状态
    //     // this.props.updateAppState({ isLoading: false, err: error.message })
    //     PubSub.publish('updateList', { isLoading: false, err: error.message })
    //   }
    // )

    // 使用fetch发送（未优化版本）
    // fetch(`http://localhost:3000/api1/search/users2?q=${keyWord}`).then(
    //   response => {
    //     console.log(response);
    //     return response.json()
    //   },
    //   error => {
    //     console.log(error);
    //     return new Promise(() => { })
    //   }
    // ).then(response => {
    //   console.log(response);
    // })

    // 使用fetch发送（优化版本）
    try {
      const response = await fetch(`http://localhost:3000/api1/search/users2?q=${keyWord}`)
      const data = await response.json()
      console.log('请求成功', data);
      PubSub.publish('updateList', { isLoading: false, users: data.items })
    } catch (error) {
      console.log('请求出错', error);
      PubSub.publish('updateList', { isLoading: false, err: error.message })
    }

  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索Github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" />&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
